<template>
	<view :style="{height:height+'rpx'}">
		<scroll-view :style="{height:height+'rpx'}" scroll-y="true" scroll-top="scrollTop" v-if="scrollshow"
		 refresher-enabled="true" :refresher-triggered="refresherTriggered" @refresherrefresh="onRefresh" @scrolltolower="loadMore">
			<slot></slot>
			<view class="loading" v-show="searchLoading">正在载入更多...</view>
			<view class="loading" v-show="searchLoadingComplete">已加载全部</view>
			<view class="loading" v-show="searchEmpty">暂无相关数据~</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			token: {
				type: Boolean,
				default: true
			},
			diffHeight: {
				type: Number,
				default: 0
			},
			first: {
				type: Boolean,
				default: true
			},
			initData: {
				type: Object,
				default: {
					url: '',
					param: {}
				},
			}
		},
		data() {
			return {
				height: 0, // 滚动区域的高度
				scrollTop: 0, // 滚动条位置
				page: 1, // 当前页码
				limit: 10, // 分页数量
				dataList: [], // 列表数据
				dataInfo: {}, // 列表其他信息
				dataParam: {}, // http数据参数
				scrollshow: false, //渲染组件

				refresherTriggered: false, // 当前下拉刷新状态，true已经被触发，false未被触发
				searchLoading: false, // "上拉加载"
				searchLoadingComplete: false, // "加载完毕"
				searchEmpty: false, // "暂无信息"
				loadtrue: true, //请求完毕
				_freshing: false, //方式刷新2次
				firstload: true, //第一次加载
			};
		},
		mounted() {
			let that = this
			this._freshing = false;
			this.dataParam = this.initData
			uni.getSystemInfo({
				success: (res) => {
					let scale = 750 / uni.getSystemInfoSync().windowWidth; // rpx转化比例
					let $height = res.screenHeight - res.safeArea.bottom; // 底部小黑条高度
					// #ifdef MP-WEIXIN
					this.height = (res.windowHeight - $height) * scale - this.diffHeight
					// #endif
					
					// #ifdef H5
					this.height = (res.screenHeight - $height) * scale - this.diffHeight
					// #endif
					
					this.scrollshow = true
				}
			})
			if (this.first) {
				setTimeout(() => {
					that.onRefresh()
				}, 500)
			}

		},
		methods: {
			//切换刷新数据
			oncutRefresh(res){
				this.dataParam = res
				this._freshing = false;
				this.onRefresh()
			},
			//下拉加载
			onRefresh() {
				this.page = 1
				this.dataList = []
				this.scrollTop = 0
				//第一次加载不转圈圈
				if (this.firstload) {
					this.firstload = false
				} else {
					this.refresherTriggered = true
				}
				this.searchLoadingComplete = false
				this.searchEmpty = false
				this.getList();
			},
			//组件返回
			onfirst() {
				this.first = true
				this.onRefresh()
			},
			//到底部触发
			loadMore() {
				//有下一页并上一页已经加载完毕
				if (!this.searchLoadingComplete && this.searchLoading == false) {
					this.page++
					this.getList();
				}
			},
			// 获取列表
			getList() {
				//防止2次刷新
				if (this._freshing) return;
				this._freshing = true;
				//组件刚进页面不加载请求
				if (!this.first) return
				//开始加载
				this.searchLoading = true
				let that = this
				that.dataParam.param.page = that.page
				that.dataParam.param.limit = that.limit
				let httpdata = {
					url: that.dataParam.url,
					data: that.dataParam.param,
					token: that.token,
				}
				if (that.dataParam.type) {
					httpdata.type = that.dataParam.type
				}
				if (that.dataParam.urldata) {
					httpdata.urldata = that.dataParam.urldata
				}
				this.$Http(httpdata).then(res => {
					//解除2次刷新
					this._freshing = false;
					if (res.code == 1) {
						// 已全部加载完毕
						this.refresherTriggered = false
						this.searchLoading = false
						//没有数据得情况下
						if (res.data.data == null || res.data.data.length == 0) {
							this.searchEmpty = true
						} else {
							this.searchEmpty = false
						}
						//当有下一页数据得得情况下
						if (that.page >= res.data.all_page && !this.searchEmpty) {
							this.searchLoadingComplete = true
						} else {
							this.searchLoadingComplete = false
						}
						// 赋值
						that.dataList = that.dataList.concat(res.data.data)
						that.dataInfo = res.data.info ? res.data.info : {}
						that.dataInfo.count = res.data.count
						// 触发组件的dataRefresh事件
						that.$emit('dataRefresh', that.dataList)
						// 触发组件的infoRefresh事件
						that.$emit('infoRefresh', that.dataInfo)
					} else if (res.code === 0) {
						if (res.data === null) {
							// 赋值
							this.dataList = []
							this.refresherTriggered = false
							this.searchLoading = false
							this.searchEmpty = true
							this.searchLoadingComplete = false
							// 触发组件的dataRefresh事件
							that.$emit('dataRefresh', that.dataList)
							that.$emit('infoRefresh', {})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				});
			}
		},
		// watch: {
		// 	initData: function(newd, old) {
		// 		this.dataParam = newd
		// 	},
		// }
	}
</script>

<style>
	.loading {
		font-size: 28rpx;
		text-align: center;
		padding: 30rpx 0;
		color: #969696;
	}
</style>
